<template>
  <el-form ref="editForm" :model="formData" label-width="80px">
    <el-form-item v-for="(header,key) in headers" :key="key" :prop="header.key" :label="header.label">
      <!--    输入框      -->
      <template v-if="header.type==null || header.type=='input'">
        <el-input  v-if="header.subType==null ||  header.subType=='string'" type="string" v-model="formData[header.key]"
                   :disabled="editDialogDisabled(header)"></el-input>
        <el-input  v-if="header.subType=='number'" type="number" v-model.number="formData[header.key]"
                   :disabled="editDialogDisabled(header)"></el-input>
      </template>
      <!--    日期选择器  date     -->
      <el-date-picker v-if="header.type=='date'"
                      v-model="formData[header.key]"
                      type="date"
                      :disabled="editDialogDisabled(header)"
                      placeholder="选择日期">
      </el-date-picker>
      <!--    日期选择器  datetime     -->
      <el-date-picker v-if="header.type=='datetime'"
                      v-model="formData[header.key]"
                      type="datetime"
                      :disabled="editDialogDisabled(header)"
                      placeholder="选择日期">
      </el-date-picker>


      <!--    图片      -->
      <el-image v-if="header.type=='image'"
                style="width: 100px; height: 100px"
                :src="formData[header.key]"
                fit="cover"
                :disabled="editDialogDisabled(header)"
      ></el-image>


      <!--    单选     -->
      <el-radio-group v-if="header.type=='radio'"
                      v-model="formData[header.key]"
                      type="radio"
      >
        <el-radio v-for="(subSelect,subKey) in header.options" :key="key + subKey"
                  :label="subSelect.key"
                  :disabled="editDialogDisabled(header)"> {{ subSelect.label }}
        </el-radio>
      </el-radio-group>
      <!--    单选 - 按钮      -->
      <el-radio-group v-if="header.type=='radio-button'"
                      v-model="formData[header.key]"
                      type="radio"
      >
        <el-radio-button v-for="(subSelect,subKey) in header.options" :key="key + subKey"
                         :label="subSelect.key"
                         :disabled="editDialogDisabled(header)"
        > {{ subSelect.label }}
        </el-radio-button>
      </el-radio-group>


      <!--     下拉选择     -->
      <el-select v-if="header.type=='select'"
                 v-model="formData[header.key]"
                 :disabled="editDialogDisabled(header)"
                 placeholder="请选择">
        <el-option v-for="(subSelect,subKey) in header.options" :key="key + subKey"
                   :value="subSelect.key"
                   :label="subSelect.label">
        </el-option>
      </el-select>


      <!--     复选框     -->
      <el-checkbox-group v-if="header.type=='checkbox'"
                         v-model="formData[header.key]"
                         :disabled="editDialogDisabled(header)"
      >
        <el-checkbox v-for="(subSelect,subKey) in header.options" :key="key + subKey"
                     :label="subSelect.key"
        >
          {{ subSelect.label }}
        </el-checkbox>
      </el-checkbox-group>
      <!--     复选框-按钮     -->
      <el-checkbox-group v-if="header.type=='checkbox-button'"
                         :disabled="editDialogDisabled(header)"
                         v-model="formData[header.key]"
      >
        <el-checkbox-button v-for="(subSelect,subKey) in header.options" :key="key + subKey"
                            :label="subSelect.key"
        >
          {{ subSelect.label }}
        </el-checkbox-button>
      </el-checkbox-group>

    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name:'FormDetail',
  props:{
    data:{
      type:Object,
      required:true
    },
    headers: {
      type: Array,
      required:true
    },
  },
  computed:{
    formData:{
      get(){
        return this.data
      },
      set(newVal){
        this.$emit('update:data',newVal);
      }
    }
  },
  methods:{
    editDialogDisabled(header){
      return this.editDialogType === 'detail' ||  header.forbiddenEdit
    },
  }
}
</script>